<template>
    <div id="body-padding">
        <p id="p">提醒</p>
        <div id="wu">暂 无 提 醒</div>
        <button id="list" v-if="news.length" @click="delAll">清空消息列表</button>
        <div v-for='(n,i) in news' class="news">
            <!--{{n.time.split(' ')[1]}}-->
            <router-link :to="'/reply/'+n.logID">
                
                {{n.Yuser.name}}
                在
                {{n.time.split(' ')[1]}}
                回复了您
            </router-link>
            <button class="fa fa-close" @click="btnClick(n._id)"></button>
        </div>
    </div>
</template>

<script>
import {mapState} from 'vuex'
export default {
    data(){
        return {

        }
    },
    computed:{
        ...mapState([
            "news"
        ]),
        time(){
            return 
        }
    },
    methods:{
        mount(){
            this.$store.dispatch("canWord");
        },
        btnClick(e){
            this.$store.dispatch("delWord",e);
        },
        delAll(){
            this.layer.confirm(
                "确定全部删除？"
            ,{},()=>{
                this.layer.closeAll();
                this.$store.dispatch("delWord","all");
            })

        }
    },
    activated(){
        this.mount();
    }

}
</script>

<style scoped>
.news{
    border: solid 1px #ccc;
    position: relative;
    padding: 8px;
    /*border-radius: 8px;*/
    margin-top: 10px;
}

.news button{
    position: absolute;
    border: solid 1px  #41B883;
    background-color: #41B883;
    color: white;
    right: 0;
    top: 0;
    height: 100%;
    width: 40px;
}
.news a{
    color: #4FC08D;
}
.yuan{
    color: #1D9E74;
    position: absolute;
    font-size: 10px;
}
#list{
    background-color: #41B883;
    color: white;
    border: solid 1px #41B883;
    position: absolute;
    top: 67px;
    right: 20px;
    padding: 2px 8px;
    height: 30px;
}
#wu{
    text-align: center;
    font-size: 22px;
}
</style>